<extend name="Base/common" />

<block name="body">
<style>
</style>
<div class="hz-body">
	<div class="alert alert-danger alert-dismissible fade in info" id="infodiv" hidden="hidden" role="alert">
		<strong id="info"></strong>
	</div>
	<form id="executeForm">
	  <div class="text-align-center">
	  	<h3>注册</h3>
	  </div>
	  <div class="form-group">
	    <input name="phone" type="text" id="phone" class="form-control"  placeholder="手机号码" onblur="check_phone()">
	  </div>
	  <div class="form-group">
	    <input name="password" type="password" id="password" class="form-control" placeholder="密码" onblur="check_password()">
	  </div>
	  <div class="form-group">
	  	<input class="form-control wid50 dib" name="vcode" id="vcode" onblur="check_vcode()" placeholder="验证码"/>
	  	<button class="btn btn-danger fr" type="button" id="vcode-btn" style="width: 5rem;">获取验证码</button>
	  </div>
	  <div class="text-align-center">
		  <button type="button" id="register-btn" class="btn btn-primary wid50 mr20">注册</button>
		  <a href="{:U('User/login')}" style="font-size: 0.8rem;">登录</a>
	  </div>
	</form>
</div>
</block>

<block name="script">
	<script type="text/javascript" src="__JS__/User/check.js"></script>
	<script>
		var count = 60;
		var handle;
		
        $('#vcode-btn').on('click', get_vcode);
        $('#register-btn').on('click', post);
        function get_vcode() {
            var $this = $('#vcode-btn'), pi = $('#phone'), p = pi.val();
            if (!p || !/^1[3|4|5|7|8][0-9]\d{8}$/.test(p)) {
                pi.css('border', '1px solid red').focus().prev().children('span').html('请输入正确的手机号码');
            } else {
                $.post("{:U('User/get_reg_vcode')}", {p: p}, function(res) {
                    if (res.status) {
                        $this.text(count + '秒').off('click');
                        handle = setInterval("count_down()", 1000);
                        pi.css('border', '1px solid #a9a9a9');
                        alert(res.info);
                    } else {
                        pi.css('border', '1px solid red').focus();
                        alert(res.info);
                    }
                });
            }
        }
        function count_down() {
            $this = $('#vcode-btn');
            $this.text((--count) + "秒");
            if (count <= 0) {
                count = 60;
                $this.text("获取验证码").on('click', get_vcode);
                clearInterval(handle);
            }
        }
        
        function post() {
            var $this = $('#register-btn'), ph = check_phone(), pw = check_password(), c = check_vcode();
            if (!ph) {
                $('#phone').focus();
            } else if (!pw) {
                $('#password').focus();
            } else if (!c) {
                $('#vcode').focus();
            } else {
                $this.text('正在提交...').off('click');
                $.post("{:U('User/register')}", $('#executeForm').serialize(), function(res) {
                    if (res.status == 1) {
                        location.href = res.url;
                    } else if (!res.status) {
                        alert(res.info);
                    } else {
                        $('#info').html(res.info);
                        $('#infodiv').show();
                        setTimeout("$('#infodiv').hide()",3000);
                    }
                    $this.text('注册').on('click', post);
                }, 'json');
            }
        }
       $('#infodiv').click(function(){$('#infodiv').hide();});
        function check_vcode() {
            var vci = $('#vcode'), vc = vci.val().trim(), p = $('#phone').val(), r = false;
            if (!vc) {
                vci.parent().addClass("has-error");
            } else if (!/^[0-9]{6}$/.test(vc)) {
                vci.parent().addClass("has-error");
            } else {
            	vci.parent().removeClass("has-error");
                vci.parent().addClass("has-success");
                r = true;
            }
            return r;
        }
         $(document).ready(function(){
			$("#register_li").addClass("active");//左边的菜单栏亮起来
		});
	</script>
</block>